<template>
  <div id="mountNode" :style="{width:width}">
    <div class="editor" >
      <!--右击后出现的菜单-->
       <context-menu @getMenuData="getMenuData"/>
      <!--顶部菜单栏-->
      <toolbar  @getPopupObj="getPopupObj"/>
      <div style="height: 42px;"></div>
      <div class="bottom-container">
        <!--左边菜单栏-->
        <item-panel @getMenuData="getMenuData"/>
        <!--右边信息详情栏-->
<!--        <detail-panel />-->
        <!--右下角的导航器-->
        <!-- <minimap /> -->
        <!--画布-->
        <page :height="height" :width="width"  :data="data" :uploadJsonData="uploadJsonData"/>
      </div>
      <!--导入文件弹窗-->
      <exportDialog :popUpObj="popUpObj" @getUploadJson="getUploadJson"/>
      <!--编辑和详情弹窗-->
      <detailDialog :detailObj="detailObj"></detailDialog>
    </div>
    <Flow />
  </div>
</template>

<script>
import Toolbar from "../Toolbar";
import ItemPanel from "../ItemPanel";
// import DetailPanel from "../DetailPanel";
// import Minimap from "../Minimap";
import Page from "../Page";
import Flow from "../Flow"
import ContextMenu from "../ContextMenu";
import Editor from "@/zstp/components/Base/Editor";
import command from "@/zstp/command";
import exportDialog from "../G6Editor/exportDialog.vue"
import detailDialog from "@/zstp/components/DetailPanel/detailDialog";

export default {
  name: "G6Editor",
  components: {
    Toolbar,
    ItemPanel,
    // DetailPanel,
    // Minimap,
    Page,
    ContextMenu,
    exportDialog,
    Flow,
    detailDialog
  },
  props: {
    height: {
      type: Number,
      default: document.documentElement.clientHeight
    },
    width: {
      type: Number,
      default: document.documentElement.clientWidth
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  created() {
    this.init();
  },
  data() {
    return {
      editor: {},
      command: null,
      popUpObj:{},
      detailObj:{},
      uploadJsonData:{}
    };
  },
  methods: {
    init() {
      this.editor = new Editor();
      this.command = new command(this.editor);
    },
    // 获取导入按钮事件
    getPopupObj(obj){
      this.popUpObj=obj
    },
    // 从exportDialog获取上传的json数据
    getUploadJson(upJsonData){
      this.uploadJsonData=upJsonData
    },
    // 右击后弹出弹窗展示节点数据
    getMenuData(data){
      this.detailObj=data
    }
  }
};
</script>

<style scoped>
.editor {
  position: relative;
  width: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.bottom-container {
  position: relative;
}
</style>
